<template>
    <view>
        <uni-card :is-shadow="false" :is-full="true" padding="0" margin="0">
            <template v-slot:title>
                <view style="display: flex; justify-content: space-between; font-size: 11px; padding: 10px 0">
                    <view><uni-tag :mark="true" :text="order.soGrou === true ? order?.soItin?.giGrpe + '人团' : '单购'" type="error" :circle="true" size="small" /> 订单编号：{{ order.soNumb }} </view>
                    <view><uni-tag :inverted="true" :text="order.soStat" type="warning" size="small" /></view>
                </view>
            </template>
            <view style="display: flex; height: auto; padding: 0">
                <view style="width: 100px; position: relative">
                    <image style="width: 90px; height: 90px" :src="order.soItin?.giPrph ? getActivityItemImage(order.soItin?.giPrph) : tempImageUrl"></image>
                </view>
                <view style="flex: 1">
                    <view style="height: 40px; font-weight: 600; font-size: 14px">{{ order.soItin?.giName }}</view>
                    <view style="display: flex">
                        <view style="flex: 1; justify-content: space-between">
                            <text style="color: red; font-weight: 800; font-size: 16px">￥{{ order.soPric || 0 }}</text>
                            <text v-if="order.soDisc > 0" style="color: #ee0a24; font-size: 11px; margin-left: 10px">(已优惠￥{{ order.soDisc || 0 }}元)</text>
                        </view>
                        <view>x 1</view>
                    </view>
                </view>
            </view>
        </uni-card>

        <uni-section v-if="order.soItin?.services?.nodes?.length > 0" title="服务清单" type="line" padding="0">
            <uni-list>
                <uni-list-item v-for="(item, index) in order.soItin?.services?.nodes">
                    <template v-slot:header>
                        <uni-badge :text="index + 1" type="warning" size="normal" />
                    </template>
                    <template v-slot:body>
                        <view class="slot-text">
                            <view style="font-size: 14px; margin-left: 5px">{{ item?.info?.siName }} </view>
                            <view style="font-size: 12px; margin-left: 5px; color: #a1a3a6; width: 220px">
                                {{ item?.info?.siCont }}
                            </view>
                        </view>
                    </template>
                    <template v-slot:footer>
                        <view>
                            <view style="font-size: 12px; text-align: right"> ￥{{ numberFormat(item?.siPric, 2) }} </view>
                            <view style="font-size: 12px; text-align: right">
                                {{ item?.info?.siUnsu + "/" + item?.info?.siUnit }}
                            </view>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </uni-section>

        <view style="margin-bottom: 5px"></view>

        <uni-section v-if="order.soItin?.commodities?.nodes?.length > 0" title="商品清单" type="line" padding="0" style="margin-bottom: 10px">
            <uni-list>
                <uni-list-item v-for="(item, index) in order.soItin?.commodities?.nodes">
                    <template v-slot:header>
                        <uni-badge :text="index + 1" type="success" size="normal" />
                    </template>
                    <template v-slot:body>
                        <view class="slot-text">
                            <view style="font-size: 14px; margin-left: 5px">
                                {{ item?.info?.ciAlna || "商品名称" }}
                            </view>
                            <view style="font-size: 12px; margin-left: 5px; color: #a1a3a6; width: 220px">
                                {{ item?.info?.ciDesc || "商品描述" }}
                            </view>
                        </view>
                    </template>
                    <template v-slot:footer>
                        <view>
                            <view style="font-size: 12px; text-align: right"> ￥{{ numberFormat(item?.ciMava, 2) }} </view>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
        </uni-section>

        <uni-section v-if="activityItem?.consumer?.puPhon" title="收货地址" type="line" padding="0 20px">
            <view> {{ order.consumer?.puRena || "" + " - " + order.consumer?.puPhon }}</view>
            <view>{{ "区划地址：" + (order.consumer?.puAdpr || "") + (order.consumer?.puAdci || "") + (order.consumer?.puAdco || "") + (order.consumer?.puAdst || "") }} </view>
            <view>{{ "详细地址：" + order.consumer?.puAdde || "" }}</view>
        </uni-section>
    </view>
</template>

<script>
import { getOrderByCiUuid } from "../../utils/api";
import { mapGetters } from "vuex";
export default {
    components: {},
    data() {
        return {
            order: {},
            avatar: "../../static/images/location.png",
            tempImageUrl: "http://jdc.jd.com/img/90x90/",
        };
    },
    onLoad(params) {
        if (params.soUuid) this.loadOrder(params.soUuid);
    },

    computed: {
        ...mapGetters({
            organizationGateway: "globalInfo/organizationGateway",
            userInfo: "personInfo/userInfo",
			defaultImageBase64: "globalInfo/defaultImageBase64",
			activity: "activityInfo/activity",
        }),
    },

    methods: {
        async loadOrder(soUuid) {
            let res = await getOrderByCiUuid({ soCuid: this.userInfo.ciUuid, soUuid });
            if (res?.length>0) {
                this.order = res[0] || [];
            }
        },
		
		getActivityItemImage(giPrph) {
			let path = "";
			if (typeof giPrph === "string") path = giPrph;
			else if (Array.isArray(giPrph) && giPrph.length > 1) {
				if (typeof giPrph[0] === "string") path = giPrph[0];
				else {
					if (new Date().getUTCTime() >= this.activity.gpStti) {
						const item = giPrph.find((item) => item.display === "3");
						path = item.path || "";
					} else {
						const item = giPrph.find((item) => item.display === "2");
						path = item.path || "";
					}
				}
			}
			else if (Array.isArray(giPrph) && giPrph.length === 1) {
				if (typeof giPrph[0] === "string") {
					path = giPrph[0];
				} else path = giPrph[0].path || "";
			}
			return path ? this.organizationGateway + "/file/download?filepath=" + path : this.defaultImageBase64;
		},
    },
};
</script>

<style lang="scss" scoped>
.slot-text {
    flex: 1;
    font-size: 14px;
    margin-right: 10px;
}
</style>
